#@cmsLayout()

#define cmsContent()
<div class="cms-breadcrumb">
	<i class="layui-icon layui-icon-flag"></i>
	<span class="layui-breadcrumb">
	  	<a href="">文章管理</a>
	  	<a><cite>新增文章</cite></a>
	</span>
</div>

<div class="body-card layui-card">
	<form id="saveArticle" class="layui-form layui-form-pane" action="#(ctx)/cmsArt/saveArt" method="post" onsubmit="return false;">
  		<div class="layui-hide">
  			<input type="text" name="type" value="1">
  		</div>
  		<div class="layui-form-item">
    		<label class="layui-form-label">标题</label>
    		<div class="layui-input-inline">
      			<input type="text" name="title" placeholder="请输入文章标题" class="layui-input">
    		</div>
    		<div class="layui-form-mid layui-word-aux"><span class="color-warn">*</span></div>
  		</div>
  		<div class="layui-form-item">
    		<label class="layui-form-label">摘要</label>
    		<div class="layui-input-block">
      			<input type="text" name="subtitle" placeholder="请输入文章摘要" class="layui-input">
    		</div>
  		</div>
  		<div class="layui-form-item">
    		<label class="layui-form-label">栏目</label>
    		<div class="layui-input-inline">
      			<select name="column">
      				<option value="0">请选择文章所属栏目</option>###这个必须得有，不然页面显示会乱
				  	#for(x : artColumnsMap)
				  	<optgroup label="#(x.key)">
				  		#for(l : x.value)
				  		<option value="#(l.id)">#(l.name)</option>
				  		#end
				  	</optgroup>
				  	#end
				</select>
    		</div>
    		<div class="layui-form-mid layui-word-aux"><span class="color-warn">*</span></div>
  		</div>
  		<div class="layui-form-item">
  			<div id="editor"></div>
  		</div>
  		<div class="layui-hide">###隐藏用于表单提交的textarea
  			<textarea id="artContent" rows="0" cols="0" name="content"></textarea>
  			<textarea id="artContentText" rows="0" cols="0" name="contentText"></textarea>
  		</div>
  		<div class="layui-form-item">
    		<label class="layui-form-label">是否置顶</label>
    		<div class="layui-input-inline">
      			<select name="isTop">
      				<option value="0">否</option>
      				<option value="1">是</option>
				</select>
    		</div>
  		</div>
  		<div id="thumbnail-item" class="layui-form-item layui-hide" pane>###已经上传的缩略图
    		<label class="layui-form-label">已传缩略图</label>
    		<div id="thumbnail-input" class="layui-input-block">
    		</div>
  		</div>
  		<div class="layui-form-item" pane>
    		<label class="layui-form-label">缩略图</label>
    		<div class="layui-input-inline">
      			<button type="button" class="layui-btn layui-btn-normal" id="thumbnail">传缩略图</button>
    		</div>
    		<div class="layui-form-mid layui-word-aux">每篇文章最多只能有一张缩略图，多次上传将以最后一张为准</div>
  		</div>
  		<div id="files-item" class="layui-form-item layui-hide" pane>###已经上传的附件
    		<label class="layui-form-label">已传附件</label>
    		<div id="files-input" class="layui-input-block">
    		</div>
  		</div>
  		<div class="layui-form-item" pane>
    		<label class="layui-form-label">附件</label>
    		<div class="layui-input-inline">
      			<button type="button" class="layui-btn layui-btn-normal" id="uploadFile">上传附件</button>
    		</div>
    		<div class="layui-form-mid layui-word-aux">每次上传一个，多个附件需要分次长上传</div>
  		</div>
  		<div class="layui-form-item">
    		<div class="layui-input-block">
      			<button class="layui-btn" onclick="ajaxSaveForm('#saveArticle')">立即提交</button>
      			<button type="reset" class="layui-btn layui-btn-primary">重置</button>
    		</div>
  		</div>
  	</form>
</div>

#@jsInit()

###wangEditor一定要提前引入，不然会报错
<script type="text/javascript">
	var E = window.wangEditor;
    var editor = new E('#editor');
    editor.customConfig.debug = true;
    editor.customConfig.zIndex = 1;
    editor.customConfig.showLinkImg = false;//隐藏“网络图片”tab
    editor.customConfig.uploadImgServer = '/file/uploadImg4Editor';//富文本图片上传到服务器
    editor.customConfig.uploadFileName = 'file';//自定义 fileName
    editor.customConfig.uploadImgMaxLength = 1;//限制一次最多上传1张
    editor.customConfig.uploadImgMaxSize = 10*1024*1024;//将图片大小限制为 10M
    editor.customConfig.uploadImgParams = {
   		type: 'artImg'
   	}
    editor.customConfig.uploadImgHooks = {
   		//图片上传并返回结果，但图片插入错误时触发
   		fail: function (xhr, editor, result) {
   	        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
   			layer.msg("图片上传出错！");
   	    },
   		//图片上传出错时触发
   	    error: function (xhr, editor) {
   	        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
   	    	layer.msg("图片上传出错！");
   	    },
   		//图片上传超时时触发
   	    timeout: function (xhr, editor) {
   	        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
   	    	layer.msg("图片上传超时，请检查网络！");
   	    }
    }
    var $artContent = $('#artContent');
    var $artContentText = $('#artContentText');
    editor.customConfig.onchange = function (html) {
        // 监控变化，同步更新到 textarea
        $artContent.val(html);
        $artContentText.val(editor.txt.text());
    }
    editor.create();
</script>

###文件上传
<script>
	var upload = layui.upload;
	// 缩略图上传处理
	upload.render({
	    elem: '#thumbnail', //绑定元素
	    url: '/file/upload', //上传接口
	    data: {type: 'thumbnail'},//其他额外参数，此处是缩略图
	    accept: 'images', //接受上传的类型
	    acceptMime: 'image/*', //只显示图片文件
	    exts: 'jpg|png|gif|bmp|jpeg', //允许的文件扩展名，图片是相对固定的
	    size: #(site.fileMaxSize.toInt()*1024), //允许的大小，单位KB，使用siteInfo中的变量
	    done: function(res, index, upload){//上传接口请求成功的回调
	    	if('ok'==res.state){//后台返回成功
	    		layer.msg(res.msg);
	    		$("#thumbnail-item").removeClass("layui-hide");
	    		var html = "<input type='checkbox' name='thumbnail' value='"+res.fileId+"' title='"+res.fileName+"' checked>";
	    		html = html + "<a href='javascript:;' onclick='viewImg("+res.fileId+")' class='layui-btn layui-btn-sm'>预览</a>";
	    		$("#thumbnail-input").html(html);
	    		form.render("checkbox");
	    	} else {//后台返回失败
	    		layer.msg(res.msg);
	    	}
	    },
	    error: function(index, upload){//上传请求失败的回调
	    	layer.msg("文件上传失败");
	    }
	});
	
	// 附件上传处理
	upload.render({
	    elem: '#uploadFile', //绑定元素
	    url: '/file/upload', //上传接口
	    data: {type: 'annex'},//其他额外参数，此处是附件
	    accept: 'file', //接受上传的类型
	    exts: '#(site.fileSuffix??)', //允许的文件扩展名，使用siteInfo中的变量
	    size: #(site.fileMaxSize.toInt()*1024), //允许的大小，单位KB，使用siteInfo中的变量
	    done: function(res, index, upload){//上传接口请求成功的回调
	    	if('ok'==res.state){//后台返回成功
	    		layer.msg(res.msg);
	    		$("#files-item").removeClass("layui-hide");
	    		$("#files-input").append("<input type='checkbox' name='files' value='"+res.fileId+"' title='"+res.fileName+"' checked>");
	    		form.render("checkbox");
	    	} else {//后台返回失败
	    		layer.msg(res.msg);
	    	}
	    },
	    error: function(index, upload){//上传请求失败的回调
	    	layer.msg("文件上传失败");
	    }
	});
</script>

#end